<template>
  <div class="contextForm">
    <Form :model="formItem" :label-width="150" class="consumerForm">
      <div class="item-title">小程序设置</div>
      <FormItem label="小程序头像">
        <div v-if="formItem.saas.head_img" class="brand-item-logo disFlex">
          <img :src="formItem.saas.head_img.head_img" />
          <!-- <upload :multiple="true" :spread="true" @confirmUpload="changeLogoFn"></upload> -->
        </div>
        <div
          v-else
          class="brand-item-environment new-add-brand-item-environment disFlex Flex-middle Flex-center"
          style="margin: 0;"
        >
          <!-- <span>+ 添加图片</span> -->
          <!-- <upload :multiple="true" :spread="true" @confirmUpload="changeLogoFn"></upload> -->
        </div>
      </FormItem>
      <FormItem label="小程序名称">
        <Input v-model="formItem.saas.name" placeholder="请输入小程序名称" type="text" style="width:200px"></Input>
      </FormItem>
      <FormItem label="小程序口号">
        <Input
          v-model="formItem.saas.slogan"
          placeholder="请输入小程序口号"
          type="text"
          style="width:200px"
          maxlength="16"
        ></Input>
        <span>若涉及到百分号，请使用半角百分号，或复制“%”进行填写</span>
      </FormItem>
      <FormItem label="小程序Logo">
        <div
          v-if="formItem.saas.logo"
          class="brand-item-logo disFlex"
          style="border:none;height:40px"
        >
          <img :src="formItem.saas.logo" style="border-radius:0;height:32px;width:auto" />
          <upload :multiple="true" :spread="true" @confirmUpload="changeLogoFn"></upload>
        </div>
        <div
          v-else
          class="brand-item-environment new-add-brand-item-environment disFlex Flex-middle Flex-center"
          style="margin: 0;"
        >
          <span>+ 添加图片</span>
          <upload :multiple="true" :spread="true" @confirmUpload="changeLogoFn"></upload>
        </div>
        <span>点击添加或更换Logo，建议宽度258px、高度64px</span>
      </FormItem>
      <FormItem label="短信签名">
        <Input
          v-model="formItem.saasConfig.sms_signature"
          placeholder="请输入短信签名"
          type="text"
          style="width:210px"
          maxlength="16"
        ></Input>
        <span>用于H5短信验证码注册登陆，请先找运营人员申请短信签名再填写!</span>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="update">保存</Button>
      </FormItem>
      <div class="item-title">微信支付</div>
      <!-- 微信支付申请页 -->

      <FormItem label="微信支付商户号" label-width="150">
        <Input v-model="formItem.pay.mch_id" placeholder="请输入微信支付商户号" style="width:400px" disabled></Input>
      </FormItem>
      <FormItem label="API密钥" label-width="150">
        <Input v-model="formItem.pay.secret_key" placeholder="请输入API密钥" disabled></Input>
      </FormItem>
      <FormItem label="安全证书 KEY" label-width="150">
        <div class="input-wrapper">
          <Input
            readonly
            v-model="formItem.pay.key"
            placeholder="点击开始上传证书"
            style="cursor: pointer;"
            disabled
          ></Input>
          <!-- <input
            class="upload-input"
            name="key"
            type="file"
            accept=".pem"
            @change="handleFileChange"
          >-->
        </div>
      </FormItem>
      <FormItem label="安全证书 CERT" prop="cert" label-width="150">
        <div class="input-wrapper">
          <Input
            readonly
            v-model="formItem.pay.cert"
            placeholder="点击开始上传证书"
            style="cursor: pointer;"
            disabled
          ></Input>
          <!-- <input
            class="upload-input"
            name="cert"
            type="file"
            accept=".pem"
            @change="handleFileChange"
          >-->
        </div>
      </FormItem>
      <!-- <FormItem label="申请类型" label-width="150">
        <RadioGroup v-model="type">
          <Radio label="2">服务商模式</Radio>
          <Radio label="1">否</Radio>
        </RadioGroup>
      </FormItem>-->

      <div class="item-title">小程序路径</div>
      <FormItem label="用户端-首页">
        <Input
          id="mainpathInput"
          v-model="pathItem.mainpath"
          readonly
          style="width: 320px; margin-right: 15px;"
        ></Input>
        <Button
          class="mainpBtn"
          type="primary"
          data-clipboard-target="#mainpathInput"
          @click="copyUrl('.mainpBtn')"
        >点击复制</Button>
      </FormItem>
      <FormItem label="用户端-我的">
        <Input
          id="discoverInput"
          v-model="pathItem.discoverpath"
          readonly
          style="width: 320px; margin-right: 15px;"
        ></Input>
        <Button
          class="discoverBtn"
          type="primary"
          data-clipboard-target="#discoverInput"
          @click="copyUrl('.discoverBtn')"
        >点击复制</Button>
      </FormItem>
      <FormItem label="企业端-首页">
        <Input
          id="testnewInput"
          v-model="pathItem.testnewpath"
          readonly
          style="width: 320px; margin-right: 15px;"
        ></Input>
        <Button
          class="testnewBtn"
          type="primary"
          data-clipboard-target="#testnewInput"
          @click="copyUrl('.testnewBtn')"
        >点击复制</Button>
      </FormItem>
      <FormItem label="用户端-职位详情">
        <Input
          id="nineInput"
          v-model="pathItem.ninepath"
          readonly
          style="width: 320px; margin-right: 15px;"
        ></Input>
        <Button
          class="nineBtn"
          type="primary"
          data-clipboard-target="#nineInput"
          @click="copyUrl('.nineBtn')"
        >点击复制</Button>
      </FormItem>
      <FormItem label="企业端-简历详情">
        <Input
          id="mineInput"
          v-model="pathItem.minepath"
          readonly
          style="width: 320px; margin-right: 15px;"
        ></Input>
        <Button
          class="mineBtn"
          type="primary"
          data-clipboard-target="#mineInput"
          @click="copyUrl('.mineBtn')"
        >点击复制</Button>
      </FormItem>
      <FormItem label="企业端-职位管理">
        <Input
          id="orderInput"
          v-model="pathItem.orderpath"
          readonly
          style="width: 320px; margin-right: 15px;"
        ></Input>
        <Button
          class="orderBtn"
          type="primary"
          data-clipboard-target="#orderInput"
          @click="copyUrl('.orderBtn')"
        >点击复制</Button>
      </FormItem>
      <FormItem label="企业端-我的">
        <Input
          id="shopInput"
          v-model="pathItem.shoppath"
          readonly
          style="width: 320px; margin-right: 15px;"
        ></Input>
        <Button
          class="shopBtn"
          type="primary"
          data-clipboard-target="#shopInput"
          @click="copyUrl('.shopBtn')"
        >点击复制</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { BaseSetting, BaseSettingUpdate } from "api/recuit/setting";
import upload from "base/upload/upload";
import Config from "@/config";
import Clipboard from "clipboard";

export default {
  name: "",
  data () {
    return {
      formItem: {},
      formData: new FormData(),
      type: "2",
      pathItem: {
        mainpath: "pages/consumer/index/index",
        discoverpath: "pages/consumer/my/my",
        testnewpath: "pages/business/index/index",
        ninepath: "subpackages/subPackageS/jobInfo/jobInfo",
        minepath: "subpackages/subPackageF/resumeInfo/resumeInfo",
        orderpath: "subpackages/subPackageF/jobManage/jobManage",
        shoppath: "pages/business/my/my"
      }
    };
  },
  components: {
    upload
  },
  mounted () {
    this.getData();
  },
  methods: {
    // 复制链接
    copyUrl (btnclass) {
      let clipboard = new Clipboard(btnclass);
      clipboard.on("success", e => {
        this.$Message.success("复制成功！");
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        this.$Message.error("复制失败，请更换浏览器或者手动复制");
        clipboard.destroy();
      });
    },
    getData () {
      BaseSetting()
        .then(result => {
          this.formItem = result;
          // console.log(this.formItem)
          //   this.formItem.is_open_reward = result.is_open_reward.toString(10)
          //   this.formItem.min_withdraw_limit = result.min_withdraw_limit
        })
        .catch(err => { });
    },
    update () {
      BaseSettingUpdate({
        name: this.formItem.saas.name,
        slogan: this.formItem.saas.slogan,
        logo: this.formItem.saas.logo,
        sms_signature: this.formItem.saasConfig.sms_signature,
      }).then(result => {
        this.$Message.success("保存成功");
        // var formData = new FormDatas();
        // formData.append("mch_id", this.formItem.pay.mch_id);
        // formData.append("type", 2);
        // formData.append("secret_key", this.formItem.pay.secret_key);
        // formData.append("key", this.formData.get("key"));
        // formData.append("cert", this.formData.get("cert"));
        // axios
        //   .post(`${Config.recuitUrl}/empower/setWechatPayment`, formData, {
        //     // 单独配置
        //     withCredentials: true,
        //     headers: {
        //       "Content-Type": "multipart/form-data"
        //     }
        //   })
        //   .then(res => {
        //     this.$Message.success("保存成功");
        //   });
      });
    },
    handleFileChange (event) {
      let formData = this.formData;
      formData.append([event.target.name], event.target.files[0]);
      this.formItem.pay[event.target.name] = event.target.name + ".pem";
    },
    //修改头像
    changeLogoFn (_url) {
      this.formItem.saas.logo = _url[0];
    }
  }
};
</script>

<style scoped lang="less">
.contextForm {
  padding: 2%;
  background: white;
  .item-title {
    margin-bottom: 20px;
    padding: 8px 16px;
    font-weight: bolder;
    background-color: #f5f5f5;
    color: #333;
  }
  .alert {
    color: rgb(153, 153, 153);
    margin-top: 15px;
  }
}
.brand-item-logo {
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  top: 0;
  left: 0;

  img {
    width: 100%;
    border-radius: 100px;
  }
}
.brand-item-environment {
  width: 214px;
  height: 120px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 15px;
  overflow: hidden;
  margin-top: 10px;

  &:nth-of-type(2n + 1) {
    margin-left: 0;
  }

  img {
    width: 100%;
    height: 100%;
    float: left;
  }

  & > .close {
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #fff;
  }
}

.old-brand-item-environment {
  margin-left: 0;
  cursor: pointer;
}

.new-add-brand-item-environment {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 15px;
  overflow: hidden;
  margin-left: 15px;
  cursor: pointer;
  width: 100px;
  height: 100px;
  margin-top: 29px;

  &:nth-of-type(2n + 1) {
    margin-left: 0;
  }

  img {
    width: 100%;
    height: 100%;
    float: left;
  }

  & > .close {
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #fff;
  }
}
.input-wrapper {
  position: relative;
}
.input-wrapper .upload-input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
}
</style>
